<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="Generator" content="Editplus®">
	<meta name="Author" content="">
	<meta name="Keywords" content="">
	<meta name="Description" content="">
	<title>canvas黑客帝国代码雨特效</title>
	<meta name="keywords" content="canvas动画"/>
	<meta name="description" content="网页特效"/>	
	<style>
	*{
		padding: 0;
		margin: 0;
	}
	html{
		overflow: hidden;
	}
	</style>
</head>
<body>
	<canvas id="canvas" style="background-color: black;"></canvas>
	<script type="text/javascript">
			window.onload=function(){
			var canvas=document.getElementById("canvas");
			var context=canvas.getContext("2d");
			var W=window.innerWidth;
			var H=window.innerHeight;
			canvas.width=W;
			canvas.height=H;
			var fontSize=20;
			//显示字体大小
			var colunms=Math.floor(W/fontSize);
			var drops=[];
			for(var i=0;i<colunms;i++){
				drops.push(0);
			}
			var str="0101001001 010111010100 00110010100101";
			//javascript html5 canvas 显示元素
			function draw(){
				context.fillStyle="rgba(0,0,0,0.05)";
				context.fillRect(0, 0, W, H);
				context.font = "700 "+fontSize+"px 华文新魏"
				context.fillStyle ="#0000ff";
				context.shadowcolor ="yellow";
				context.shadowBlur = 10;
				context.shadowOffsetX = 10100;
				context.shadowOffsetY = 10100;

				//1accf9 字体颜色
				for(var i=0;i<colunms;i++){
					var index=Math.floor(Math.random()*str.length);
					var x=i*fontSize;
					var y=drops[i]*fontSize;
					context.fillText(str[index], x, y);
					if (y>=canvas.height && Math.random()>0.99) {
						drops[i]=0;
					}
					drops[i]++;
				}
			};
			function randColor(){
				var r =Math.floor(Math.random() * 256);
				var g =Math.floor(Math.random() * 256);
				var b =Math.floor(Math.random() * 256);
				return"rgb("+r+","+g+","+b+")";
			}
			draw();
			setInterval(draw,20);
			//速度
		};

	</script>
</body>
</html>
